<template>
  <div class="wrap">
    <!-- todo 头部 -->
    <header>
      <div class="user">
        <div class="img"></div>
      </div>

      <div class="right">
        <img src="../assets/imgs/arrow-white.png" alt="" />
      </div>
    </header>
    <!-- todo 头部 -->

    <!-- todo main -->
    <main>
      <router-link tag="div" to="/order?id=0" class="mylist">
        <div class="text">我的订单</div>
        <div class="right">查看全部订单 &gt;</div>
      </router-link>
      <div class="list">
        <router-link
          tag="div"
          :to="'/order?id=' + (i + 1)"
          class="item"
          v-for="(vl, i) in myList"
          :key="i"
        >
          <img :src="vl.imgUrl" alt="" />
          <div class="text">{{ vl.title }}</div>
        </router-link>
        <div class="item">
          <img src="../assets/imgs/order_img5.png" alt="" />
          <div class="text">售后服务</div>
        </div>
      </div>
    </main>
    <div class="banner"></div>
    <!-- todo main -->

    <!-- todo 列表区 -->
    <section class="slist">
      <!-- 我的收藏 -->
      <router-link to="/like" tag="div" class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_1.png" alt="" />
          </div>
          <div class="text">我的收藏</div>
        </div>
        <div class="right">&gt;</div>
      </router-link>

      <!-- 优惠券 -->
      <router-link tag="div" to="/coupon" class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_3.png" alt="" />
          </div>
          <div class="text">优惠券</div>
        </div>
        <div class="right">&gt;</div>
      </router-link>

      <!-- 我的评价 -->
      <!-- <div class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_3.png" alt="" />
          </div>
          <div class="text">我的评价</div>
        </div>
        <div class="right">&gt;</div>
      </div> -->

      <!-- 地址管理 -->
      <router-link tag="div" to="/address" class="item">
        <div class="left">
          <div class="img">
            <img
              src="../assets/imgs/my_list_4.png"
              style="width: 25px"
              alt=""
            />
          </div>
          <div class="text">地址管理</div>
        </div>
        <div class="right">&gt;</div>
      </router-link>

      <!-- 我的退单 -->
      <div class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_5.png" alt="" />
          </div>
          <div class="text">我的退单</div>
        </div>
        <div class="right">&gt;</div>
      </div>

      <!-- 帮助中心 -->
      <!-- <div class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_6.png" alt="" />
          </div>
          <div class="text">帮助中心</div>
        </div>
        <div class="right">&gt;</div>
      </div> -->

      <!-- 退出登录 -->
      <div class="item">
        <div class="left">
          <div class="img">
            <img src="../assets/imgs/my_list_1.png" alt="" />
          </div>
          <div class="text">退出登录</div>
        </div>
        <div class="right">&gt;</div>
      </div>
    </section>
    <!-- todo 列表区 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      myList: [
        {
          imgUrl:
            "http://www.hlamall.cn:80/img/mobile-site/gobal/order_img1.png",
          title: "待付款",
        },
        {
          imgUrl:
            "http://www.hlamall.cn:80/img/mobile-site/gobal/order_img2.png",
          title: "待发货",
        },
        {
          imgUrl:
            "http://www.hlamall.cn:80/img/mobile-site/gobal/order_img3.png",
          title: "已发货",
        },
        {
          imgUrl:
            "http://www.hlamall.cn:80/img/mobile-site/gobal/order_img4.png",
          title: "待评价",
        },
      ],
    };
  },
  created() {
    this.$emit("show");
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 101px;
  background: #cb3341;
  display: flex;
  justify-content: space-between;
  align-items: center;

  > .user {
    width: 105px;
    height: 100%;
    box-sizing: border-box;
    padding: 21px 21px;

    > .img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.2);
      background: url(../assets/imgs/谭晶晶.jpg) no-repeat 0px -5px;
      background-size: cover;
      position: relative;
      background-clip: content-box;
    }
  }

  > .right {
    width: 10px;
    height: 16px;
    margin-right: 15px;

    > img {
      width: 100%;
    }
  }
}

main {
  display: flex;
  flex-wrap: wrap;

  > .mylist {
    box-sizing: border-box;
    margin-left: 14px;
    margin-right: 13px;
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;

    > .right {
      font-size: 11px;
      color: #666;
    }
  }

  > .list {
    display: flex;
    height: 65px;
    width: 100%;

    > .item {
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      > img {
        width: 42px;
        height: 32px;
        transform: scale(0.55);
      }

      > .text {
        margin-top: -3px;
        font-size: 11px;
      }
    }
  }
}

.banner {
  width: 100%;
  height: 10px;
  background: #eee;
}

.slist {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 14px 180px;

  > .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    border-bottom: 1px solid #f8f8f8;

    > .left {
      display: flex;
      align-items: center;

      > .img {
        width: 36px;
        height: 36px;
        transform: scale(0.5);
      }
    }
  }
}
</style>